<template>
	<!-- 电梯绑定 添加/编辑/详情 -->
	<div class="compile">
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
		 :title="title" :visible.sync="addAndCompileShow">
			<el-form :model="form" :rules="rules" ref="form" v-loading='isLoading'>
				<el-row>
					<div class="textLeft titleMessNow">电梯绑定</div>
				</el-row>
				<el-row>
					<el-col :span="15" :offset='1'>
						<el-form-item label="选择电梯:" :label-width="formLabelWidth">
							<el-select size="mini" v-model="form.choseLift" placeholder="请选择电梯" clearable disabled>
								<el-option v-for="item in choseLiftArr" :value="item.value" :label="item.label" :key='item.value'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 电梯人员信息 -->
				<el-row>
					<div class="textLeft titleMessNow">电梯人员信息</div>
				</el-row>
				<el-row>
					<el-col :span="15" :offset='1'>
						<el-form-item label="维保人员:" :label-width="formLabelWidth">
							<el-select filterable multiple size="mini" v-model="form.mainPeople" placeholder="请选择维保人员" clearable :disabled='detailDisable'
							 @focus="chosePeo1">
								<el-option v-for="item in mainPeopleArr" :value="item.work_id" :label="item.work_name" :key='item.work_id'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5" :offset='1'>
						<div style="margin-top: 10px;">
							已选择维保人员数量&nbsp;&nbsp; {{form.mainPeople.length}}
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="15" :offset='1'>
						<el-form-item label="救援人员:" :label-width="formLabelWidth">
							<el-select filterable multiple size="mini" v-model="form.rescue" placeholder="请选择救援人员" clearable :disabled='detailDisable'
							 @focus="chosePeo2">
								<el-option v-for="item in rescueArr" :value="item.work_id" :label="item.work_name" :key='item.work_id'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5" :offset='1'>
						<div style="margin-top: 10px;">
							已选择救援人员数量&nbsp;&nbsp; {{form.rescue.length}}
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="15" :offset='1'>
						<el-form-item label="急救人员:" :label-width="formLabelWidth">
							<el-select filterable multiple size="mini" v-model="form.medic" placeholder="请选择急救人员" clearable :disabled='detailDisable'
							 @focus="chosePeo3">
								<el-option v-for="item in medicArr" :value="item.work_id" :label="item.work_name" :key='item.work_id'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5" :offset='1'>
						<div style="margin-top: 10px;">
							已选择急救人员数量&nbsp;&nbsp; {{form.medic.length}}
						</div>
					</el-col>
				</el-row>
				<!-- 匹配结果 -->
				<div v-if="detailDisable">
					<el-row>
						<div class="textLeft titleMessNow">匹配结果</div>
					</el-row>
					<el-row>
						<el-col :span="16" :offset='1'>
							<el-form-item label="更新状态:" :label-width="formLabelWidth">
								<el-input size="mini" v-model="updataType" autocomplete="off" clearable :disabled='detailDisable'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="16" :offset='1'>
							<el-form-item label="最后更新时间" :label-width="formLabelWidth">
								<el-date-picker size="mini" v-model="lastUpdataTime" type="date" placeholder="请选择最后更新时间" format="yyyy-MM-dd HH:mm:ss"
								 value-format="yyyy-MM-dd HH:mm:ss" clearable :disabled='detailDisable'>
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="div" v-if="roleId == 0">
						<el-row>
							<div class="textLeft titleMessNow">备案原始数据</div>
						</el-row>
						<el-row>
							<el-col :span="16" :offset="1">
								<div class="copy" id="content">
									{{recordCon}}
								</div>
								<el-button type="primary" style="margin-left: 170px;margin-top:15px" @click="copy">复制所有请求信息</el-button>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="16" :offset="1">
								<div class="copy" id="content1">
									{{recordCon1}}
								</div>
								<el-button type="primary" style="margin-left: 170px;margin-top:15px" @click="copy1">复制所有返回信息</el-button>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="close(2)">取 消</el-button>
				<el-button type="primary" @click="submit('form')" v-loading='ensureBtn' v-if="!detailDisable">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		axiosPost,
		axiosGet,
		loadFn,
		axiosChange,
		axiosPut
	} from "@/common.js"
	import {
		pactName,
		pactType,
		pactNum,
		pactStartTime,
		pactEndTime,
		mainDate,
		company,
		userUnit,
		liftUnit,
	} from "./rule.js"
	export default {
		props: ['addAndCompileShow', 'isAddOrComp', 'rowId'],
		mounted() {
			if (this.title == '添加电梯绑定') {
				this.isLoading = false
			}
		},
		data() {
			return {
				formLabelWidth: '120px',
				form: {
					choseLift: '',
					mainPeople: [],
					rescue: [],
					medic: [],
				},
				ensureBtn: false,
				isLoading: true,
				rules: {

				},
				mainPeopleArr: [],
				rescueArr: [],
				medicArr: [],
				choseLiftArr: [],
				recordCon: '',
				recordCon1: '',
				updataType: '',
				lastUpdataTime: '',
			}
		},
		computed: {
			detailDisable() {
				if (this.title == '电梯绑定详情') {
					return true
				} else {
					return false
				}
			},
			title() {
				if (this.isAddOrComp == 1) {
					return '添加电梯绑定'
				} else if (this.isAddOrComp == 2) {
					this.getCompileList()
					return '电梯绑定编辑'
				} else {
					this.getCompileList()
					return '电梯绑定详情'
				}
			},
			roleId() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
		},
		methods: {
			copy() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content'));
				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			copy1() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content1'));
				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			chosePeo1() {
				let params = {
					page_size_count: 9999
				}
				axiosGet('/user/person/bind/', params, (res) => {
					if (res.code == 0) {
						this.mainPeopleArr = res.detail.results.map((item) => {
							item.work_id = item.id
							item.work_name = item.real_name
							return item
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			chosePeo2() {
				let params = {
					page_size_count: 9999
				}
				axiosGet('/user/person/bind/', params, (res) => {
					if (res.code == 0) {
						this.rescueArr = res.detail.results.map((item) => {
							item.work_id = item.id
							item.work_name = item.real_name
							return item
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			chosePeo3() {
				let params = {
					page_size_count: 9999
				}
				axiosGet('/user/person/bind/', params, (res) => {
					if (res.code == 0) {
						this.medicArr = res.detail.results.map((item) => {
							item.work_id = item.id
							item.work_name = item.real_name
							return item
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//编辑详情获取数据
			getCompileList() {
				let rowId = this.rowId
				let url = '/basic/detail/' + rowId + '/'
				axiosGet(url, {}, (res) => {
					console.log(res)
					this.isLoading = false
					if (res.code == 0) {
						this.form.choseLift = res.detail.id
						this.choseLiftArr = [{
								label: res.detail.register_code,
								value: res.detail.id
							}],
							res.detail.worker.map((item) => {
								if (item.worker_type == 10) {
									this.mainPeopleArr = item.worker_person
									this.form.mainPeople = item.worker_person.map((item1) => {
										return item1.work_id
									})
								} else if (item.worker_type == 20) {
									this.rescueArr = item.worker_person
									this.form.rescue = item.worker_person.map((item1) => {
										return item1.work_id
									})
								} else if (item.worker_type == 30) {
									this.medicArr = item.worker_person
									this.form.medic = item.worker_person.map((item1) => {
										return item1.work_id
									})
								}
							})
						if (Object.keys(res.detail.record).length > 0) {
							if (!!res.detail.record.ret_info) {
								this.recordCon1 = res.detail.record.ret_info
							} else {
								this.recordCon1 = {}
							}
							if (!!res.detail.record.reg_info) {
								this.recordCon = res.detail.record.reg_info
							} else {
								this.recordCon = {}
							}
						}
						let message = !!res.detail.record.rec_status ? '更新成功' : '更新失败'
						this.updataType = message + '/' + res.detail.record.msg
						this.lastUpdataTime = res.detail.record.end_time
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//编辑提交
			oprationUintPub() {
				let rowId = this.rowId
				let url = '/basic/detail/' + rowId + '/'
				const workers = [];
				workers.push({
					worker_type: 10,
					worker_person: this.form.mainPeople
				})
				workers.push({
					worker_type: 20,
					worker_person: this.form.rescue
				})
				workers.push({
					worker_type: 30,
					worker_person: this.form.medic
				})

				let data = {
					elevator: this.form.choseLift,
					worker: workers
				}
				axiosPut(url, data, (res) => {
					this.ensureBtn = false
					if (res.code == 0) {
						this.close(1)
						this.$message({
							type: 'success',
							message: '操作成功'
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//提交
			submit(ruleForm) {
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						this.ensureBtn = true
						this.oprationUintPub()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//关闭
			close(value) {
				let newValue = 2
				if (value) {
					newValue = value
				}
				this.$emit('detailMaskShow', newValue)
			},
		}
	}
</script>
<style scoped lang="less">
</style>
